<template>
    <div v-if="user.roles.roleName==='学生'" style="height: 3000px;">
    <el-card @click="move(1)" :class="'card animate__animated '+className.one" style="max-width: 95%;margin-bottom: 10px;margin: 0px auto;">
        <template #header>
        <div class="box">
            <h4 style="color: darkgray;">我的姓名：</h4>
        </div>
        </template>
        <h3 style="margin-bottom: 5px;">{{ user.nickname }}</h3>
    </el-card>
    <div style="width: 95%;margin: 20px auto;">
    <el-card @click="move(2)" :class="'card animate__animated '+className.two" style="width: 49%;display: inline-block;height: 350px;">
        <template #header>

        <div class="box">   
            <icon class="iconfont1 icon-stu01" style="float: left;"></icon><h3>近期考试</h3>
            <el-popover
                placement="top"
                :width="170"
                trigger="hover"
                content="前往查看近期考试"
            >
                <template #reference>
                    <el-icon @click="toRouter('/user/optionExamination')" style="position: absolute;right: 0px;top: 0px;" size="25"><Right /></el-icon>
                </template>
            </el-popover>
        </div>
        </template>
        <!-- <el-alert :title="'考试名'+' 考试分数'+' 当前心态'" type="success" :closable="false" style="margin-top: 2%; color: black;"/>   -->
     <div v-for="i in roleList">
        <div style="max-width: 600px">     
        <el-alert v-if="i.passScore !=null && i.scope >= i.passScore" :title="'考试名：'+i.name+' 考试分数：'+i.scope+' 当前心态：'+arr_jg[now_jg_icon()]" type="success" :closable="false" style="margin-top: 2%; color: black;"></el-alert>
        <el-alert v-else :title="'考试名：'+i.name+' 考试分数：'+i.scope+' 当前心态：'+arr_bjg[now_jg_icon()]" type="error" :closable="false" style="margin-top: 2%;"></el-alert>
        </div>
     </div>
    </el-card>
    <el-card @click="move(3)" :class="'card animate__animated '+className.tree" style="width: 49%;display: inline-block;height: 350px;margin-left: 20px;">
        <template #header>
        <div class="box">
          <icon class="iconfont1 icon-class" style="float: left;"></icon><h3 >近期成绩</h3>
            <el-popover
                placement="top"
                :width="170"
                trigger="hover"
                content="前往查看近期成绩"
            >
                <template #reference>
                    <el-icon @click="toRouter('/user/historyExaminationInfo')" style="position: absolute;right: 0px;top: 0px;" size="25"><Right /></el-icon>
                </template>
            </el-popover>
        </div>
        </template>
        <div ref="main_stu" style="width: 99%;height:300px;"></div>
    </el-card>
    </div>
    </div>

    <!-- 管理端主页 -->
    <div v-else-if="user.roles.roleName==='管理员'">
        <div style="height: 700px; width: 100%;">
            <br />
            <div class="message" @mousemove="color_change1" @mouseleave="color_out1" :style="{ boxShadow: `var(${kkl_col1})` }"
                style="float: left; margin-left: 2%; height: 65px; border-radius: var(--el-border-radius-base); background: #FAFCFF; padding: 20px;line-height: 65px;">
                <el-space>
                    <span :style="{ background: tea_col1 }">
                        <icon class="iconfont icon-class"></icon>
                    </span>
                    <el-text size="large" style="margin-left: 26px;">讲师人数</el-text>
                    <el-text size="large">{{ arr.teacherNum }}</el-text>
                </el-space>
            </div>
            <div class="message" @mousemove="color_change2" @mouseleave="color_out2" :style="{ boxShadow: `var(${kkl_col2})` }"
                style="float: left; margin-left: 1%; height: 65px; border-radius: var(--el-border-radius-base); background: #FAFCFF; padding: 20px;line-height: 65px;">
                <el-space>
                    <span :style="{ background: tea_col2 }">
                        <icon class="iconfont icon-heart"></icon>
                    </span>
                    <el-text size="large" style="margin-left: 26px;">学生人数</el-text>
                    <el-text size="large">{{ arr.studentNum }}</el-text>
                </el-space>
            </div>
            <div class="message" @mousemove="color_change3" @mouseleave="color_out3" :style="{ boxShadow: `var(${kkl_col3})` }"
                style="float: left; margin-left: 1%; height: 65px; border-radius: var(--el-border-radius-base); background: #FAFCFF; padding: 20px;line-height: 65px;">
                <el-space>
                    <span :style="{ background: tea_col3 }">
                        <icon class="iconfont icon-examti"></icon>
                    </span>
                    <el-text size="large" style="margin-left: 26px;">考试总数</el-text>
                    <el-text size="large">{{ arr.paperNum }}</el-text>
                </el-space>
            </div>
            <div class="message" @mousemove="color_change4" @mouseleave="color_out4" :style="{ boxShadow: `var(${kkl_col4})` }"
                style="float: left; margin-left: 1%; height: 65px; border-radius: var(--el-border-radius-base); background: #FAFCFF; padding: 20px;line-height: 65px;">
                <el-space>
                    <span :style="{ background: tea_col4 }">
                        <icon class="iconfont icon-question"></icon>
                    </span>
                    <el-text size="large" style="margin-left: 26px;">题目数量</el-text>
                    <el-text size="large">{{ arr.questionNum }}</el-text>
                </el-space>
            </div>
            <div
                style="float: left; height: 400px; width: 1405px; background: #FAFCFF; box-shadow: var(--el-box-shadow-lighter); position: relative; top:8%;left: 1%;">
                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div ref="main3" style="width: 100%;height:100%;"></div>
            </div>
        </div>

    </div>
    <!-- 老师端 -->
    <div v-else-if="user.roles.roleName === '讲师'">
    <div style="height: 700px; width: 100%;">
        <br/>
     <div class="message" @mousemove="color_change1" @mouseleave="color_out1" :style="{boxShadow: `var(${kkl_col1})`}" style="float: left; margin-left: 2%; height: 65px; border-radius: var(--el-border-radius-base); background: #FAFCFF; padding: 20px;line-height: 65px;">
       <el-space>
        <span :style="{background: tea_col1}"><icon class="iconfont icon-class"></icon></span>
       <el-text size="large" style="margin-left: 26px;">班级数量：</el-text>
       <el-text size="large">{{teach_sclass.length}}</el-text>
       </el-space>
     </div>
     <div class="message" @mousemove="color_change2" @mouseleave="color_out2" :style="{boxShadow: `var(${kkl_col2})`}" style="float: left; margin-left: 1%; height: 65px; border-radius: var(--el-border-radius-base); background: #FAFCFF; padding: 20px;line-height: 65px;">
        <el-space>
        <span :style="{background: tea_col2}"><icon class="iconfont icon-heart"></icon></span>
       <el-text size="large" style="margin-left: 26px;">班级总人数：</el-text>
       <el-text size="large">{{student_conunt}}</el-text>
       </el-space>
     </div>
     <div class="message" @mousemove="color_change3" @mouseleave="color_out3" :style="{boxShadow: `var(${kkl_col3})`}" style="float: left; margin-left: 1%; height: 65px; border-radius: var(--el-border-radius-base); background: #FAFCFF; padding: 20px;line-height: 65px;">
        <el-space>
        <span :style="{background: tea_col3}"><icon class="iconfont icon-examti"></icon></span>
       <el-text size="large" style="margin-left: 26px;">试卷总数：</el-text>
       <el-text size="large" >{{teach_examinfo.length-1}}</el-text>
       </el-space>
     </div>
     <div class="message" @mousemove="color_change4" @mouseleave="color_out4" :style="{boxShadow: `var(${kkl_col4})`}" style="float: left; margin-left: 1%; height: 65px; border-radius: var(--el-border-radius-base); background: #FAFCFF; padding: 20px;line-height: 65px;">
        <el-space>
       <span :style="{background: tea_col4}"><icon class="iconfont icon-question"></icon></span>
       <el-text size="large" style="margin-left: 26px;">题目数量：</el-text>
       <el-text size="large">{{tea_count}}</el-text>
       </el-space>
     </div>  
     <div style="float: left; height: 400px; width: 649px; background: #FAFCFF; box-shadow: var(--el-box-shadow-lighter); position: relative; top:8%;left: 4%;">
       <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div ref="main" style="width: 600px;height:400px;"></div>
         <div style="position: relative; left: 0px;top: -300px;">
    </div>
     </div>
    <div style="float: left; height: 400px; width: 649px; background: #FAFCFF; box-shadow: var(--el-box-shadow-lighter); position: relative; top:8%;left: 7%;">
       <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div ref="main1" style="width: 600px;height:400px;"></div>
   <div style="position: relative; left: 0px;top: -300px;">
     </div>             
   </div>
</div>
    </div>
</template>
<script setup>
import { useUserStore1 } from '@/store/userStore'
import { getStudentExam } from "@/api/teacher/class/teacher_class";
import router from "@/router";
import { ref, onMounted } from 'vue';
import { homeIndex,homeIndex1 } from '@/api/admin/home/index.js'
import * as echarts from 'echarts';
import { getTeacherClassInfo,getTeacherExamInfo } from '@/api/teacher/class/teacher_class';
import { historyExamination } from "@/api/user/historyExamination/HistoryExamination_api.js"

const userInfo = useUserStore1().userInfo;
const roleList = ref([]);
const loading = ref(true);
const total = ref(0);
const main_stu = ref(null)

let arr_jg = ['😋','😊','😉','😎','😁','😀','😮','😯']
let arr_bjg = ['🥲','😒','😭','🙀','🤕','😠','😱','😨','🤮']
// console.log(now_jg_icon()); // 输出1到100之间的一个随机整数
function now_jg_icon(){
let randomInt=Math.floor(Math.random() * (7 - 0 + 1)) + 0; 
 return randomInt;
}

//动态查询
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  subjectName: '',
  beginTime: [],
  userId:userInfo.userId
})

/** 查询课程列表 */
function getList() {
    let name = []
    let value = []
   loading.value = true;
  historyExamination(queryParams.value).then(response => {
    response.data.obj.list.forEach(element => {
        roleList.value.push(element)
        value.push(element.scope)
        name.push(element.name)
    });
     total.value = response.data.obj.total;
     loading.value = false;

var myChart_stu = echarts.init(main_stu.value);
var option_stu;

option_stu = {
  xAxis: {
    type: 'category',
    data: name
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: value,
      type: 'line'
    }
  ]
};

myChart_stu.setOption(option_stu);
  });
} 


const className=ref({})
const move=(num)=>{
    if (num==1&&className.value.one!='animate__pulse') {
        className.value.one='animate__pulse'
        setTimeout(() => {
            className.value.one=''
        }, 1000);
    }else if (num==2&&className.value.two!='animate__pulse') {
        className.value.two='animate__pulse'
        setTimeout(() => {
            className.value.two=''
        }, 1000);
    }else if (num==3&&className.value.tree!='animate__pulse') {
        className.value.tree='animate__pulse'
        setTimeout(() => {
            className.value.tree=''
        }, 1000);
    }

}
const user=ref(useUserStore1().userInfo)

const getScore=()=>{
    getStudentExam(user.value.userId).then(res=>{

    })
}
getScore()

const toRouter=(path)=>{
    router.push(path)
}

// -----------------------管理------------------------
const tea_col1 = ref('')
const kkl_col1 = ref('--el-box-shadow-lighter')
function color_change1() {
    // tea_col1.value='red'
    kkl_col1.value = '--el-box-shadow-dark'
}
function color_out1() {
    tea_col1.value = ''
    kkl_col1.value = '--el-box-shadow-lighter'
}
//---------------two
const tea_col2 = ref('')
const kkl_col2 = ref('--el-box-shadow-lighter')
function color_change2() {
    // tea_col2.value='red'
    kkl_col2.value = '--el-box-shadow-dark'
}
function color_out2() {
    tea_col2.value = ''
    kkl_col2.value = '--el-box-shadow-lighter'
}
//---------------three
const tea_col3 = ref('')
const kkl_col3 = ref('--el-box-shadow-lighter')
function color_change3() {
    // tea_col3.value='red'
    kkl_col3.value = '--el-box-shadow-dark'
}
function color_out3() {
    tea_col3.value = ''
    kkl_col3.value = '--el-box-shadow-lighter'
}
//---------------four
const tea_col4 = ref('')
const kkl_col4 = ref('--el-box-shadow-lighter')
function color_change4() {
    // tea_col4.value='red'
    kkl_col4.value = '--el-box-shadow-dark'
}
function color_out4() {
    tea_col4.value = ''
    kkl_col4.value = '--el-box-shadow-lighter'
}

    const main3 = ref(null)
    let option3;
    
const arr = ref({})
function list() {
    homeIndex1().then(res=>{
        arr.value = res.data.obj
    })
}

function initEcharts2() {
    const name = []
    const value = []
    homeIndex().then(res => {
        res.data.obj.forEach(element => {
            name.push(element.name)
            value.push(element.value)
        });
        let myChart3 = echarts.init(main3.value);
        option3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: name,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '班级人数',
                    type: 'bar',
                    barWidth: '60%',
                    data: value
                }
            ]
        };
        myChart3.setOption(option3);
    })
}

// 基于准备好的dom，初始化echarts实例
const main=ref(null)
const student_conunt = ref(0)
const teach_sclass = ref([])
 function initEcharts(){
  let myChart=echarts.init(main.value)
  getTeacherClassInfo(userInfo.userId).then(res=>{
    teach_sclass.value=res.data.obj
    res.data.obj.forEach(element => {
        student_conunt.value+=element.value 
    });
// 指定图表的配置项和数据
  let option = {
  title: {
    text: "班级统计图",
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'sdfsd',
      type: 'pie',
      radius: '50%',
      data: res.data.obj,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

option && myChart.setOption(option);
})
}    
//============================================================================================================two统计图
let tea_count = ref(0)
const teach_examinfo = ref([])
autogetTeacherExamInfo()
function autogetTeacherExamInfo(){
    getTeacherExamInfo(userInfo.userId).then(res=>{
        console.log("-=-=-=-=-=-=---------------------");
        console.log(res.data.obj);
        teach_examinfo.value = res.data.obj
        res.data.obj.forEach(element => {
          tea_count.value+=element.value
        });
    })
}

// 基于准备好的dom，初始化echarts实例
const main1=ref(null)
 function initEcharts1(){
  let myChart1=echarts.init(main1.value)
  getTeacherExamInfo(userInfo.userId).then(res=>{
// 指定图表的配置项和数据
  let option1 = {
  title: {
    text: "试卷统计图",
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: res.data.obj,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
option1 && myChart1.setOption(option1);
})
}



// }


onMounted(() => {
    if (user.value.roles.roleName=="管理员") {
        initEcharts2();
        list();
    }
    if (user.value.roles.roleName=="讲师") {
        initEcharts();
        initEcharts1();
        
    }
    if(user.value.roles.roleName == '学生'){
      getList();
    }
    })



</script>
<style scoped>
.message{
    width: 20%;
}

.card:hover{
    background-color: #fdfdfd;  
    box-shadow: 8px 8px 3px rgba(0, 0, 0, 0.1);
}


        .box {
            /* 外盒子相对定位，便于伪元素绝对定位(使下划线在文字的最底下) */
            position: relative;
        }

        .text::before {
            content: '';
            height: 2px;
            background: rgb(0, 0, 0);
            /* 伪元素默认样式 display: inline;所以需要转成inline-block宽高才会生效 */
            display: inline-block;
            /* 通过定位使下划线在最低层 */
            position: absolute;
            bottom: 450px;
            width: 0;
            /* 加上一个过渡效果，使之丝滑一些 */
            transition: width 0.36s;
        }

        .text:hover::before {
            /* 悬浮时候，让下划线伪元素宽度变成100%即可出现效果 */
            width: 39%;
        }

        .h1 {
            background: -webkit-linear-gradient(135deg,
                    #0eaf6d,
                    #ff6ac6 25%,
                    #147b96 50%,
                    #e6d205 55%,
                    #2cc4e0 60%,
                    #8b2ce0 80%,
                    #ff6384 95%,
                    #08dfb4);
            /* 文字颜色填充设置为透明 */
            -webkit-text-fill-color: transparent;
            /* 背景裁剪，即让文字使用背景色 */
            -webkit-background-clip: text;
            /* 背景图放大一下，看着柔和一些 */
            -webkit-background-size: 200% 100%;
            /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
            -webkit-animation: flowCss 12s infinite linear;
        }

        @-webkit-keyframes flowCss {
            0% {
                /* 移动背景位置 */
                background-position: 0 0;
            }

            100% {
                background-position: -400% 0;
            }
        }

        h1:hover {
            -webkit-animation: flowCss 4s infinite linear;
        }


.circle-breath {
            background: pink;
            box-shadow: 0 0 0 0 rgb(204, 73, 152);
            height: 36px;
            width: 36px;
            border-radius: 50%;
            animation: donghua 1.6s infinite;
        }

        @keyframes donghua {
            0% {
                transform: scale(0.60);
                /* 注意rgba中的a的设置 */
                box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);
            }

            60% {
                transform: scale(1);
                box-shadow: 0 0 0 36px rgba(204, 73, 152, 0%);
            }

            100% {
                transform: scale(0.60);
                box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
            }
        }
        





        .loading{
            position: fixed;  
            top: 0;  
            left: 0;  
            right: 0;  
            bottom: 0;  
            background-color: rgba(0, 0, 0, 0.5); /* 示例背景色 */  
            z-index: 1000; /* 确保它位于其他元素之上 */  
        }
       



       .box {
    width: 720px;
    /* 外盒子相对定位，便于伪元素绝对定位(使下划线在文字的最底下) */
    position: relative;
}

h1::before {
    content: '';
    height: 4px;
    background: red;
    /* 伪元素默认样式 display: inline;所以需要转成inline-block宽高才会生效 */
    display: inline-block;
    /* 通过定位使下划线在最低层 */
    position: absolute;
    bottom: -6px;
    width: 0;
    /* 加上一个过渡效果，使之丝滑一些 */
    transition: width 0.36s;
}

h1:hover::before {
    /* 悬浮时候，让下划线伪元素宽度变成100%即可出现效果 */
    width: 100%;
}

h1 {
    background: -webkit-linear-gradient(135deg,
            #0eaf6d,
            #ff6ac6 25%,
            #147b96 50%,
            #e6d205 55%,
            #2cc4e0 60%,
            #8b2ce0 80%,
            #ff6384 95%,
            #08dfb4);
    /* 文字颜色填充设置为透明 */
    -webkit-text-fill-color: transparent;
    /* 背景裁剪，即让文字使用背景色 */
    -webkit-background-clip: text;
    /* 背景图放大一下，看着柔和一些 */
    -webkit-background-size: 200% 100%;
    /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
    -webkit-animation: flowCss 12s infinite linear;
}

@-webkit-keyframes flowCss {
    0% {
        /* 移动背景位置 */
        background-position: 0 0;
    }

    100% {
        background-position: -400% 0;
    }
}

h1:hover {
    -webkit-animation: flowCss 4s infinite linear;
}


.circle-breath {
    background: pink;
    box-shadow: 0 0 0 0 rgb(204, 73, 152);
    height: 36px;
    width: 36px;
    border-radius: 50%;
    animation: donghua 1.6s infinite;
}

@keyframes donghua {
    0% {
        transform: scale(0.60);
        /* 注意rgba中的a的设置 */
        box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);
    }

    60% {
        transform: scale(1);
        box-shadow: 0 0 0 36px rgba(204, 73, 152, 0%);
    }

    100% {
        transform: scale(0.60);
        box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
    }
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* 示例背景色 */
    z-index: 1000;
    /* 确保它位于其他元素之上 */
}

body{
    background-color: #f0f2f5;
}
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}
    </style>